<template>
	<view class="layout">
		<view class="layout-header">
			<DistributionNavBar fixed :background="navBg">
				<view slot="left" class="layout-header-left">
					<image src="@/static/images/home/img_home_logo@3x.png" />
				</view>
			</DistributionNavBar>
			<!-- 搜索box -->
			<view class="layout-search flex row-between" :style="[searchBg]">
				<view class="layout-search-left flex col-center">
					<view class="city-box line-1 flex col-center" @click="openCitySite">
						<block v-if="currentSite.city">
							<text>{{ currentSite.city || '' }}</text>
							<image :src="siteIcon" />
						</block>
					</view>
					<view class="placehodler" @click.stop="openProductSearch">超人气美食</view>
					<image class="search-icon" @click.stop="openProductSearch" src="@/static/images/home/icon_home_search@2x.png" />
				</view>
				<view class="layout-search-right flex-col col-center row-center" @click.stop="openMessageCenter">
					<image src="@/static/images/home/icon_home_message@2x.png" />
					<view>消息</view>
				</view>
			</view>
		</view>

		<!-- 商品更新提示 -->
		<view class="layout-renewHint" v-if="productUpdateNum">
			<image src="@/static/icon/icon_home_renew.png" />
			<text>已为你更新{{ productUpdateNum }}条数据</text>
		</view>

		<!-- 轮播图-->
		<view v-if="isBannerListLength" class="layout-banner">
			<DistributionCarousel
				type="home"
				:height="bannerHeight"
				:dotFooter="true"
				:customerFooterStyle="swiperStyle"
				footerType="newIndex"
				:list="bannerList"
				:borderRadius="16"
			/>
		</view>

		<!-- 排序分类 -->
		<view class="layout-sort">
			<view class="layout-sort-main row-around" :style="[isFixed ? sortStyle : !isBannerListLength ? sortStyle : {}]">
				<view
					:key="index"
					v-for="(item, index) in sortList"
					@click="changeSortIndex(item, index)"
					class="layout-sort-item row-around"
					:class="{ active: item.isActive || activingIndex === index }"
				>
					{{ item.label }}
					<image
						v-if="item.sortIcon"
						:src="item[(activingIndex === index && index !== 0) ? 'chooseSortIcon' : item.isActive ? 'activeSortIcon' : 'sortIcon']"
					/>
				</view>

				<view class="select-popup" v-show="isPopupSelect" @click="closePopup" @touchmove.stop.prevent="stopScrolling">
					<block v-if="selectAllList[sortIndex]">
						<scroll-view scroll-y class="scroll-view" :style="[isTransform? {transform: 'scaleY(1)'} : {}]">
							<view
								class="select-item"
								:class="{ active: item.isActive }"
								@click="sureChoose(item, index)"
								v-for="(item, index) in selectAllList[sortIndex]"
								:key="item.id"
							>
								{{ item.label || '' }}
							</view>
						</scroll-view>
					</block>
				</view>
			</view>
		</view>

		<view class="layout-main" :style="[noBannerMain]">
			<DistributionProduct :list="productList" :skelettSize="4" :isSkelett="isProductSkelett" />

			<DistributionHint :type="isHintStatus" />
		</view>

		<DistributionTabBar />
		<!-- 抖音授权弹层 -->
		<dyPopupCode />
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import config from '@/config';
import { getUnreadMessageNumber } from '@/api/other';
import { checkDyAuth } from '@/api/third';
import { getTypeList, getIndexListBanner, getProductListNew, getOperateId } from '@/api';
import {
	isCheckLogin,
	openSetting,
	getLocation,
	defaultImageUrl,
	onShareApp,
	formatCommissionsModel,
	getSystemInfo,
	getDomeInfo,
	isIos
} from '@/utils';

import DistributionHint from '@/components/distributionHint';
import DistributionTabBar from '@/components/distributionTabBar';
import DistributionProduct from '@/components/distributionProduct';
import DistributionCarousel from '@/components/distributionCarousel';
import DistributionNavBar from '@/components/distributionNavBar/indeHome';
import dyPopupCode from '@/components/dyPopup/dyPopupCode.vue';
import { judgeOneTime, setOneTime } from '@/utils/common';

const oneDayTime = 1000 * 60 * 60 * 24;
const bannerHeight = Object.freeze(304);
const siteIcon = Object.freeze(`${defaultImageUrl}icon/icon_register_down.png`);
const messageIconObject = {
	active: require('@/static/icon/icon_home_information_active.gif'),
	default: require('@/static/icon/icon_home_information_default.png')
};
const sortIcon = require('@/static/images/home/icon_home_sx_default@3x.png');
const activeSortIcon = require('@/static/images/home/icon_home_sx_active@3x.png');
const chooseSortIcon = require('@/static/images/home/icon_home_sx_ing@3x.png');
const sortList = Object.freeze([
	{
		label: '综合排序',
		isActive:true,
		sortIcon: sortIcon,
		activeSortIcon: activeSortIcon,
		chooseSortIcon: chooseSortIcon
	},
	{
		label: '全部分类',
		isActive:false,
		sortIcon: sortIcon,
		activeSortIcon: activeSortIcon,
		chooseSortIcon: chooseSortIcon
	},
	{
		label: '商品折扣',
		isActive:false,
		sortIcon: sortIcon,
		activeSortIcon: activeSortIcon,
		chooseSortIcon: chooseSortIcon
	},
	{
		label: '佣金比例',
		isActive:false,
		sortIcon: sortIcon,
		activeSortIcon: activeSortIcon,
		chooseSortIcon: chooseSortIcon
	}
]);
const { statusBarHeight } = getSystemInfo();
const modelIsIos = isIos();
const fixedTop = Object.freeze((modelIsIos ? 44 : 48) + statusBarHeight);

export default {
	name: 'Index',
	// mixins: [onShareApp],
	data() {
		return {
			statusBarHeight,
			fixedTop,
			siteIcon,
			sortList,
			bannerHeight,
			sortIcon,
			activeSortIcon,
			chooseSortIcon,

			scrollTop: 0,
			sortMainScrollTop: 0,

			sortIndex: 0,
			tabCurrent: 0,

			isFixed: false,
			isSkelett: true,
			isPageScrollTo: false,
			isProductSkelett: true,
			isUnreadMessage: 0,

			bannerList: [],
			productList: [],

			isFirst: true,
			productUpdateNum: 0,

			isHintStatus: '', // nomore  nodata
			requestParams: {
				pageIndex: 1,
				pageSize: 10
			},
			isPopupSelect: false,
			isTransform: false,
			selectAllList: {
				0: [
					{ label: '综合排序', value: 0, isActive: true },
					{ label: '距离', value: 1 }
				],
				1: [],
				2: [
					{ label: '全部', value: 0, isActive: true },
					{ label: '5折以下', value: 1 },
					{ label: '5-7折', value: 2 },
					{ label: '7-9折', value: 3 },
					{ label: '9折以上', value: 4 }
				],
				3: [
					{ label: '全部', value: 0, isActive: true },
					{ label: '3%-10%', value: 1 },
					{ label: '10%-20%', value: 2 },
					{ label: '20%以上', value: 3 }
				]
			},

			swiperStyle: { width: '100%',textAglin:'left',paddingLeft:'20rpx' },
			scrollOpacity: 0,
			activingIndex: 0
		};
	},

	created() {
		uni.hideTabBar();
		this.getProductTypeList();
	},

	onShow() {
		const { isPageScrollTo } = this;
		this.getAllTypeUnreadNumber();

		isPageScrollTo &&
			this.$nextTick((e) => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
					success: (e) => {
						this.isPageScrollTo = false;
					}
				});
			});

		// 验证是否新用户
		if (this.getToken) {
			this.checkNewUser().then((res) => {
				const { changeShowNotBindCode } = this;
				if (res === 0) {
					if (!judgeOneTime()) {
						return;
					}
					setOneTime(true);
					changeShowNotBindCode(true);
				}
			});
			if (!this.getUserOperateId) {
				this.getOperateIdAction();
			}
		}
	},

	watch: {
		currentSite: {
			immediate: true,
			handler(afterParams, beforeParams) {
				if (beforeParams) {
					this.isPageScrollTo = true;
					this.getCurrentProductList(1, true);
				}

				this.getBannerList(afterParams.id);
			}
		}
	},

	computed: {
		...mapGetters(['getToken', 'currentSite', 'coordinate', 'tandianSearchHistory', 'getUserOperateId']),

		isCurrentSite() {
			const { currentSite } = this;

			return !!Object.keys(currentSite).length;
		},

		noIconBgStyle() {
			const { scrollTop, sortMainScrollTop } = this;

			return {
				// height: `${fixedTop + uni.upx2px(108 + 88)}px`,
				opacity: scrollTop / sortMainScrollTop
			};
		},

		sortStyle() {
			const { navBg} = this;
			return Object.assign(
				{
					position: 'fixed',
					width: '100%',
					left: 0,
					zIndex: 9999,
					transition: 'linear 0.1s'
				},
				// 84 todo
				{ top: `${fixedTop + uni.upx2px(78)}px`,background: navBg }
			);
		},
		noBannerSort() {
			// + 28
			return Object.assign(
				{ paddingBottom: '20rpx' },
				{
					marginTop: `${uni.upx2px(92)}px`
				}
			);
		},
		isBannerListLength() {
			const { bannerList } = this;
			return !!bannerList.length;
		},
		// 暂未用
		messageIcon() {
			const { isUnreadMessage } = this;

			return messageIconObject[isUnreadMessage ? 'active' : 'default'];
		},
		opacityNum(){
			const { scrollTop, sortMainScrollTop } = this;
			return scrollTop / sortMainScrollTop
		},
		navBg(){
			const { opacityNum = 0,scrollOpacity = 0 } = this;
			return `rgba(226, 237, 253, ${0.1 + Math.abs(scrollOpacity ? scrollOpacity : opacityNum)})`
		},
		searchBg(){
			const { navBg} = this;
			return {background:navBg}
		},
		noBannerMain(){
			const  { isBannerListLength,productList } = this
			return {marginTop:!isBannerListLength ? '80rpx' : 0}
		}
	},

	methods: {
		...mapMutations(['changeCoordinate', 'changeHistorySite', 'changeUserOperateId','changeShowNotBindCode']),

		async getOperateIdAction() {
			let result = await getOperateId();
			const { data = {} } = result || {};
			this.changeUserOperateId(data?.operateId || 0);
		},

		getBannerList(locationId) {
			locationId &&
				getIndexListBanner({
					locationId,
					position: 1
				}).then((res) => {
					const { code, data } = res;

					if (code !== 200) {
						return;
					}

					this.bannerList = data || [];

					this.$nextTick((e) => {
						this.getSortMainScrollTop();
					});
				});
		},

		async getProductTypeList() {
			const { isCurrentSite } = this;
			const { code, data } = await getTypeList();

			this.isSkelett = false;

			if (code !== 200) {
				return;
			}

			let productTypeList = (data || []).map((item, index) => {
				const { id, typeName } = item;

				return {
					type: id,
					label: typeName,
					value: index + 1
				};
			});

			const formatProductTypeList = productTypeList.filter(({ label }) => label !== '精选');

			if (formatProductTypeList.length <= 1) {
				productTypeList = formatProductTypeList;
			}

			this.selectAllList[1] = productTypeList;
			this.$set(this.selectAllList[1][0], 'isActive', true);
			if (!isCurrentSite) {
				const locationParams = await getLocation();
				locationParams && this.changeCoordinate(locationParams);
			}

			this.getCurrentProductList(1);
		},

		getCurrentProductList(pageIndex = this.requestParams.pageIndex, status) {
			const {
				isFirst,
				coordinate,

				currentSite,
				isCurrentSite,
				selectAllList,
				requestParams: { pageSize }
			} = this;

			const isPageIndex = pageIndex === 1;

			const sortType = selectAllList[0].filter((item) => item.isActive)[0].value || 0;
			const discountType = selectAllList[2].filter((item) => item.isActive)[0].value || 0;
			const type = selectAllList[1].filter((item) => item.isActive)[0].type || 0;
			const cpsRateType = selectAllList[3].filter((item) => item.isActive)[0].value || 0;

			const params = Object.assign(
				{
					sortType,
					cpsRateType,
					pageIndex,
					pageSize,
					type,
					discountType,
					isFirstVisit: +isFirst,

					...coordinate
				},
				isCurrentSite
					? {
							locationId: currentSite.id || '1'
					  }
					: {
							ipLocated: 1
					  }
			);
			uni.showLoading({
				title: '加载中…'
			});
			getProductListNew(params).then((res) => {
				const { code, data } = res;

				if (code !== 200) {
					return;
				}
				const { list, now, productUpdateNum } = data;

				if (isPageIndex && this.Interval) {
					clearInterval(this.Interval);
					this.Interval = null;
				}
				if (isPageIndex) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 500
					});
				}

				const filterList = (list?.data || []).map((item) => {
					let { endTime, distance, commissionsList, ...otherParams } = item;
					let filtersDistance = distance;

					if (distance) {
						filtersDistance = distance < 1000 ? `${distance}m` : `${(distance / 1000).toFixed(2)}km`;
					}

					const diff = endTime - now;
					return Object.assign(
						{
							now,
							endTime,
							...otherParams,
							distance: filtersDistance,
							commissionsList: formatCommissionsModel(commissionsList)
						},
						diff < oneDayTime && {
							isActive: true,
							diffTime: diff
						}
					);
				});

				if (isFirst) {
					this.isFirst = false;
					this.productUpdateNum = productUpdateNum;

					setTimeout((e) => {
						this.productUpdateNum = 0;
					}, 2000);
				}

				this.requestParams.pageIndex = pageIndex;
				this.productList = isPageIndex ? filterList : [...this.productList, ...filterList];

				this.$nextTick((e) => {
					this.isProductSkelett = false;

					const isSome = this.productList.some((item) => item.isActive);

					if (isSome && !this.Interval) {
						this.Interval = setInterval((e) => {
							this.changeCountdown();
						}, 1000);
					}
				});
				setTimeout(()=>{
					uni.hideLoading();
				},500)
				this.isHintStatus = isPageIndex && !filterList.length ? 'nodata' : filterList.length < pageSize ? 'nomore' : '';

				!currentSite.id && this.changeHistorySite(data?.currentSite || {});
			})
			.catch((e)=>{
				uni.hideLoading();
			})
		},

		openCitySite() {
			const url = `/otherPage/CitySite`;

			uni.navigateTo({
				url
			});
		},
		
		closePopup(){
			this.isTransform = false
			setTimeout(()=>{
				this.isPopupSelect = false
			})
		},
		async changeSortIndex(params, index) {
			const self = this
			const { fixedTop,isPopupSelect,sortIndex,isBannerListLength,sortMainScrollTop,productList,closePopup} = this;
		
			this.activingIndex = index
			if(isPopupSelect && (sortIndex ===index)){
				this.activingIndex = 0
				closePopup()
				return
			}
			
			if(isBannerListLength && productList.length > 2){
				this.scrollOpacity = 1
				uni.pageScrollTo({
					scrollTop: sortMainScrollTop + 1,
					duration: 200,
					success: (e) => {
						self.$set(self, 'sortIndex', index);
						self.scrollOpacity = 0
						self.isPopupSelect = true;
						setTimeout(()=>{
							self.isTransform = true
						},0)
					},
					complete(e) {
						console.log('compulete', e);
					}
				});
			}else{
				this.$set(this, 'sortIndex', index);
				self.isPopupSelect = true;
				setTimeout(()=>{
					self.isTransform = true
				},0)
				
			}
			
		},

		async sureChoose(item = {}, index = 0) {
			const { sortIndex = 0, coordinate,closePopup,selectAllList } = this;		
			const { isActive = false } = item

			if (isActive) {
				return;
			}
			const nowSelectList = this.selectAllList[sortIndex];
			this.selectAllList[sortIndex] = nowSelectList.map((item = {}) => {
				const { isActive, ...otherParams } = item;
				return {
					...otherParams,
					isActive: false
				};
			});
			
			this.$set(this.selectAllList[sortIndex][index], 'isActive', true);
			
			if (sortIndex === 0 && index === 1 && !Object.keys(coordinate).length) {
				const { userLocation } = await openSetting();
			
				if (!userLocation) {
					return;
				}
				
				const locationParams = await getLocation();
			
				this.changeCoordinate(locationParams);
			}
			
			let selectLabel = this.selectAllList[sortIndex][index].label || ''
			
			if(index !== 0){
				this.$set(this.sortList[sortIndex],'label',selectLabel)
				this.$set(this.sortList[sortIndex], 'isActive', true);
			}else{
				this.$set(this.sortList[sortIndex], 'isActive', false);
				this.switchSortType(sortIndex)
			}
			
			closePopup()
			this.activingIndex = 0
			this.getCurrentProductList(1);
		},
		switchSortType(sortIndex){
			const self = this
			switch(sortIndex){
				case 0:
					self.$set(self.sortList[sortIndex],'label','综合排序')
					this.$set(this.sortList[sortIndex], 'isActive', true);
					break;
				case 1:
					self.$set(self.sortList[sortIndex],'label','全部分类')
					break;
				case 2:
					self.$set(self.sortList[sortIndex],'label','商品折扣')
					break;
				case 3:
					self.$set(self.sortList[sortIndex],'label','佣金比例')
					break;
				default:
					break;
			}
		},
		changeCountdown() {
			let staus = false;
			const { productList } = this;

			productList.forEach((item) => {
				const { isActive, diffTime } = item;

				if (isActive) {
					if (diffTime > 1000) {
						staus = true;
						this.$set(item, 'diffTime', diffTime - 1000);
					} else {
						this.$set(item, 'isActive', false);
					}
				}
			});

			if (!staus) {
				clearInterval(this.Interval);
				this.Interval = null;
			}
		},

		openMessageCenter() {
			if (!isCheckLogin()) {
				return;
			}

			uni.navigateTo({
				url: '/otherPage/MessageCenter'
			});
		},

		openProductSearch() {
			const url = '/otherPage/TabbarCommonSearch?target=&type=home';

			uni.navigateTo({
				url
			});
		},

		getAllTypeUnreadNumber() {
			if (!this.getToken) {
				return;
			}

			const params = {
				typeColumnName: 'type',
				terminalCode: config.TERMINAL_CODE,
				typeList: 'explore,material,income'
			};

			getUnreadMessageNumber(params).then((res) => {
				const { code, data } = res || {};

				if (code !== 200) {
					return;
				}

				this.isUnreadMessage = Object.keys(data || {}).length;
			});
		},

		checkNewUser() {
			return new Promise((resolve, reject) => {
				checkDyAuth().then((res = {}) => {
					const { data = { checkStatus: 1 } } = res;
					resolve(data.checkStatus);
				});
			});
		},

		getSortMainScrollTop() {
			getDomeInfo.call(this, '.layout-sort-main', false).then((responseParams) => {
				const { fixedTop } = this;

				const top = responseParams.top - fixedTop - uni.upx2px(84);
				this.sortMainScrollTop = top;
			});
		},
		debounced({scrollTop}){
			this.scrollTop = scrollTop;
			this.isFixed = scrollTop > this.sortMainScrollTop;
		},
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		}
	},

	onReachBottom() {
		const {
			isHintStatus,
			isProductSkelett,
			requestParams: { pageIndex }
		} = this;
		if (isHintStatus || isProductSkelett) {
			return;
		}

		this.isHintStatus = 'loading';
		this.getCurrentProductList(pageIndex + 1);
	},

	onPageScroll(e) {
		this.debounced(e);
		this.productUpdateNum && (this.productUpdateNum = 0);
	},

	onHide() {
		this.sortIndex = 0;
		this.closePopup()
	},

	onShareAppMessage() {
		let shareObj;
		const { getUserOperateId = 0 } = this;
		shareObj = {
			title: '您的好朋友邀您一起探店赚钱!',
			path: `authorizePage/invitatAuth?aUserId=${getUserOperateId}`,
			success() {
				console.log('转发发布器已调起');
			},
			fail() {
				console.log('转发发布器调起失败');
			}
		};
		return shareObj;
	},

	components: {
		DistributionHint,
		DistributionTabBar,
		DistributionNavBar,
		DistributionProduct,
		DistributionCarousel,
		dyPopupCode
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	min-height: 100%;
	background: #f8f8fe;
	background-image: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_f5e809892bb54024af94d39a4e19e9e3.png);
	background-repeat: no-repeat;
	background-size: 100% 426rpx;
	@include Db_iosBottomDistance(120rpx);
	position: relative;

	&-banner {
		margin: 108rpx 24rpx 0;
		border-radius: 16rpx;
		overflow: hidden;
	}

	&-header {
		z-index: 9999;
		&-left {
			width: 230rpx;
			height: 60rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		&-center {
			flex: 1;
			height: 64rpx;
			padding-left: 16rpx;

			// #ifdef MP-WEIXIN
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 48rpx;
				height: 48rpx;
				padding: 5rpx;
				margin-left: 14rpx;

				&:last-child {
					padding-right: 0;
				}
			}
			// #endif
		}

		// #ifndef MP-WEIXIN
		&-right {
			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 24rpx;
			}
		}
		// #endif
	}

	&-renewHint {
		position: absolute;
		left: 50%;
		top: 202rpx;
		z-index: 99999;
		transform: translateX(-50%);

		height: 64rpx;
		padding: 0 20rpx;
		background: #000;
		border-radius: 16rpx;

		color: #fff;
		font-size: 24rpx;

		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	&-search {
		padding: 12rpx 24rpx 0;
		color: #000;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 9999;

		&-left {
			height: 72rpx;
			// line-height: 72rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 16rpx;
			border: 1px solid #c9dfff;
			width: 620rpx;
			padding: 0 20rpx 0 28rpx;
			.city-box {
				font-size: 24rpx;
				width: 130rpx;
				position: relative;
				// border-right: 1px solid rgba(0, 0, 0, 0.12);
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			
			.placehodler {
				color: #666666;
				font-size: 24rpx;
				padding-left: 24rpx;
				width: calc(100% - 170rpx);
			}
			.search-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.city-box::after{
			content: '';
			position: absolute;
			right: 0;
			top: 4rpx;
			width: 1rpx;
			height: 28rpx;
			background: rgba(0, 0, 0, 0.12);
		}
		&-right {
			// width: calc(100% - 630rpx);
			height: 72rpx;
			font-size: 22rpx;
			height: 72rpx;
			font-size: 22rpx;
			min-width: 60rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				display: inline-block;
			}
		}
	}
	&-sort {
		height: 120rpx;
		position: relative;
		z-index: 999;
		transition: linear 0.2s;

		&-main {
			padding: 0 24rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
		}
		&-item {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 10rpx;
			background: #ffffff;
			border-radius: 16rpx;

			color: #000;
			font-size: 26rpx;
			margin-right: 16rpx;
			font-weight: 600;

			display: flex;
			align-items: center;
			justify-self: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 4rpx;
			}

			&.active {
				color: #fff;
				@include Db_newGradient();
			}

			&:nth-last-child(2) {
				margin-right: 0;
			}
		}
		&-item:focus{
			color: #fff;
			@include Db_newGradient();
		}
		

		.select-popup {
			width: 100%;
			height: calc(100vh - 150rpx);
			background: rgba(0, 0, 0, 0.5);
			margin-top: 20rpx;
			overflow: hidden;
			// background: #fbfbfb;
			min-height: 200rpx;
			border-radius: 0 0 24rpx 24rpx;
			position: absolute;
			top: 92rpx;
			left: 0;
			z-index: 9999;
			transition: linear 0.2s;
			.popup-mask {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 9998;
				position: absolute;
				left: 0;
				top: 0;
			}
			.scroll-view {
				height: auto;
				max-height: 600rpx;
				background: #fff;
				z-index: inherit;
				font-size: 28rpx;
				transform: scaleY(0);
				transform-origin: top;
				transition: transform .4s;
				.active {
					color: $themeColor;
					font-weight: bold;
				}
				.select-item {
					padding: 20rpx 20rpx 20rpx 30rpx;
				}
			}
		}
	}

	&-main {
		// #ifdef MP-WEIXIN
		padding: 0 20rpx 0;
		// #endif

		// #ifdef APP-PLUS
		padding: 0 10rpx 0;
		// #endif
		min-height: 400rpx;
	}
}

.index-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	height: 380rpx;
	background-image: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_1d036bc9b0ae428b9470a9b5d893b0b5.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 1;
	transition: 'linear 0.2s';
}
</style>
